<template>
  <TreePanel :column="column" :value="value" :label="label" @choose="onChoose" />
</template>
<script lang="ts" setup>
  import { TreePanel } from '@/components/Panel';
  import { Column } from '@/seed-application/types';
  import { ref, watch } from 'vue';

  const props = defineProps<{column: Column, modelValue?: any, label?: string }>()
  const column = props.column
  const emits = defineEmits(['update:modelValue'])
  const value = ref<string>()
  const label = ref()  
  watch(() => props.modelValue, (val) => value.value = val, { immediate: true })
  watch(() => props.label, (val) => label.value = val, { immediate: true })

  const onChoose = (val, lbl) => emits('update:modelValue', val, lbl)
  watch(() => props.modelValue, (val) => value.value = val)
</script>